<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head th:replace="layout :: head(~{ :: title}, ~{ :: link}, ~{ ::script},~{::style})">
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <title>商户管理平台-部门管理</title>

    <style></style>
    <link rel="stylesheet" th:href="@{/plugins/jquery-treegrid/css/jquery.treegrid.css}"/>
    <link rel="stylesheet" th:href="@{/plugins/zTree_v3-master/css/zTreeStyle/zTreeStyle.css}">
    <script th:src="@{/plugins/jquery-treegrid/js/jquery.treegrid.js}"></script>
    <script th:src="@{/plugins/jquery-treegrid/js/jquery.treegrid.bootstrap3.js}"></script>
    <script th:src="@{/plugins/zTree_v3-master/js/jquery.ztree.core.js}"></script>
    <script th:src="@{/plugins/zTree_v3-master/js/jquery.ztree.excheck.js}"></script>
    <script th:inline="javascript">
        $(function () {
            $("#table").treegrid();
        });
    </script>
</head>
<body th:replace="layout::body(~{this::section})">
<section class="content-wrapper">
    <section class="content-header">
        <h1>
            部门
            <small>管理</small>
        </h1>
        <ol class="breadcrumb">
            <li><a href="/"><i class="fa fa-dashboard"></i> 商户管理平台</a></li>
            <li class="active">部门管理</li>
        </ol>
    </section>
    <section class="content">
        <div th:if="${respMsg != ''}" class="alert alert-danger alert-dismissible">
            <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
            <h4><i class="icon fa fa-ban"></i> 操作提示</h4>
            <label th:text="${respMsg}"/>
        </div>
        <div class="row">
            <div th:each="opts:${session.WEBOPTS}"  class="col-md-1" th:if="${opts.href == '/MpsDept/Save'}">
                <a th:href="@{/MpsDept/goMpsDeptAdd}" class="btn btn-primary">增加</a>
            </div>
        </div>

        <table id="table" class="table">
            <thead>
            <tr>
                <td style="text-align: center">部门</td>
                <td style="text-align: center">角色</td>
                <td style="text-align: center">所属机构</td>
                <td style="text-align: center">备注</td>
                <td style="text-align: center">排序</td>
                <td style="text-align: center">状态</td>
                <td style="text-align: center">创建时间</td>
                <td style="text-align: center">修改时间</td>
                <td style="text-align: center">操作</td>
            </tr>
            </thead>
            <tbody>
            <tr th:each="item:${MpsDeptList}" th:class="treegrid-+${item.id}"
                th:classappend="${item.parent}==''?'':'treegrid-parent-'+${item.parent}" style="text-align: center">
                <td th:text="${item.name}"></td>
                <td>
                   <span th:each="role:${item.roles}">
                       <span th:text="${role}"></span>
                       <span> </span>
                   </span>
                </td>
                <td th:text="${item.orgId}"></td>
                <td th:text="${item.descr}"></td>
                <td th:text="${item.sort}"></td>
                <td th:text="${item.status}"></td>
                <td th:text="${item.createTime}"></td>
                <td th:text="${item.modifyTime}"></td>
                <td>
                    <!--<a>详情</a>-->
                    <span th:each="opts:${session.WEBOPTS}">
                       <span th:if="${opts.href == '/MpsDept/Update'}">
                           <a th:href="@{/MpsDept/goMpsDeptEdit(id=${item.id})}">修改</a>
                       </span>
                       <span th:if="${opts.href == '/MpsDept/Delete'}">
                           <a th:href="@{/MpsDept/Delete(id=${item.id})}" onclick="return confirm('确定删除?');">删除</a>
                       </span>
                        <span th:if="${opts.href == '/MpsUser/setDeptUser'}">
                                 <a href="#" th:name="${item.id}" data-toggle="modal" data-target="#myModal"
                                    onclick="onLoadZTree(this,'user')">用户配置</a>
                        </span>
                   </span>
                </td>
            </tr>
            </tbody>
        </table>
        <!-- 模态框（Modal） -->
        <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
             aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <input type="hidden" id="ModalDeptId">
                        <input type="hidden" id="ModalSetUrl">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                            &times;
                        </button>
                        <h4 class="modal-title" id="myModalLabel">

                        </h4>
                    </div>
                    <div class="modal-body">
                        <div class="col-md-offset-4">
                            <ul id="treeFun" class="ztree"></ul>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">关闭
                        </button>
                        <button type="button" class="btn btn-primary" data-dismiss="modal"  onclick="submitDate()">
                            提交更改
                        </button>
                        <script type="application/javascript">
                            function submitDate(){
                                var deptId=$("#ModalDeptId").val();
                                var url=$("#ModalSetUrl").val();
                                var zTree = $.fn.zTree.getZTreeObj("treeFun");
                                var nodes = zTree.getCheckedNodes();
                                var ids = "";
                                for (var i = 0, l = nodes.length; i < l; i++) {
                                    ids += "," + nodes[i].id;
                                };
                                $.ajax({
                                    type: 'POST',//请求方式：post
                                    data: {ids: ids.substring(1),deptId:deptId},
                                    dataType: 'json',//数据传输格式：json
                                    url: url,
                                    error: function () {
                                        //请求失败处理函数
                                        alert('亲，请求失败！');
                                    },
                                    success: function (data) {
                                        alert('提交成功!');
                                        return;
                                    }
                                });
                            }
                        </script>
                    </div>
                </div><!-- /.modal-content -->
            </div><!-- /.modal -->
        </div>
        <script type="application/javascript">
            var setting = {
                check: {
                    enable: true,
                    chkboxType: {"Y": "ps", "N": "s"}
                },
                data: {
                    simpleData: {
                        enable: true,
                        idKey: "id",
                        pIdKey: "pId",
                    }
                }
            };
            var treeNodes;
            /**
             * 加载树形结构数据
             */
            function onLoadZTree(obj,type) {
                var deptId = $(obj).attr("name");
                var getUrl="";
                var setUrl="";
                if(type=="user"){
                    $("#myModalLabel").html("用户配置");
                    getUrl="/MpsUser/mpsAllUserByDeptId?id="+deptId
                    setUrl="/MpsUser/setDeptUser"
                }
                $.ajax({
                    async: false,//是否异步
                    cache: false,//是否使用缓存
                    type: 'POST',//请求方式：post
                    dataType: 'json',//数据传输格式：json
                    url: getUrl,
                    error: function () {
                        //请求失败处理函数
                        alert('亲，请求失败！');
                        treeNodes=[];
                    },
                    success: function (data) {
                        treeNodes = data;//把后台封装好的简单Json格式赋给treeNodes
                    }
                });
                $.fn.zTree.destroy();
                var t = $("#treeFun");
                t = $.fn.zTree.init(t, setting, treeNodes);
                //赋值Id
                $("#ModalDeptId").val(deptId);
                $("#ModalSetUrl").val(setUrl);
            }
        </script>
    </section>
</section>
</body>
</html>